import React, { useEffect, useState } from 'react'
import { getRecommendData } from '@/apis'

import { useSelector, useDispatch } from 'react-redux';
import { selectGoods, selectShoppingCart, clsShoppingCart } from "../stores/cartSlice";

import styles from './css/cart/index.module.scss'
import CartRecommend from '../components/CartRecommend'
import CartItem from '../components/CartItem'
import { DeleteO } from '@react-vant/icons';

export async function loader() {
  const res = await getRecommendData()
  return { recom: res.data.data.cart_bottom }
}

export default function CartView() {

  const dispatch = useDispatch();
  const goods = useSelector(selectGoods)
  const shoppingCart = useSelector(selectShoppingCart)

  // 拿取已加入购物车的商品
  const [goodsCart, setGoodsCart] = useState([])
  useEffect(() => {
    let arr = []
    for (let key in goods) {
      shoppingCart.map(cartObj => {
        let tempArr = goods[key].goods.filter(o => {
          return o.cake_goods_id == cartObj.cakeId
        }) || []
        if (tempArr.length !== 0) {
          arr.unshift({ ...tempArr[0], count: cartObj.count, update: cartObj.update })
        }
        return ''
      })
    }
    setGoodsCart(arr.sort((a, b) => b.update - a.update))
  }, [shoppingCart])

  const [allAmount, setAllAmount] = useState([])
  useEffect(() => {
    let total = 0
    goodsCart.map(o => {
      total += o.count * Number(o.price)
    })
    setAllAmount(total)
  }, [goodsCart])

  return (
    <div className="container">

      <div>
        {shoppingCart.length === 0 ? (
          <div className={styles["empty_box"]}>
            <img src="https://oss.51cocoa.com/themes/site/img/cartempty.png" alt="" />
            <span>您的购物车里还没有商品</span>
            <span href="#">去购物 {'>>'}</span>
          </div>
        ) : (
          <section>
            <div className={styles["cake-title"]}>
              <div className={styles["goods"]}>商品</div>
              <div className={styles["birthdays-card"]}>生日牌</div>
              <div className={styles["price"]}>单价</div>
              <div className={styles["number"]}>数量</div>
              <div className={styles["total-price"]}>金额</div>
            </div>

            <div className={styles["card-content"]}>
              <ul>
                {goodsCart.map(item => (
                  <CartItem key={item.cake_goods_id} item={item} />
                ))}

              </ul>

            </div>

            <div className={styles["card-bottom"]}>
              <div className={styles["left"]} onClick={() => { dispatch(clsShoppingCart()) }}>
                <i><DeleteO color="#684029" fontSize="20px" /></i>
                全部清空
              </div>
              <div className={styles["right"]}>
                <ul>
                  <li className={styles["menoy"]}>商品金额: ￥ {Number(allAmount).toFixed(2)}</li>
                  <li className={styles["cheap"]}>活动优惠: 8折</li>
                  <li className={styles["all"]}>
                    <span className={styles["all_1"]}>合计: ￥</span>
                    <span className={styles["all_2"]}>{Number(allAmount * 0.8).toFixed(2)}</span>
                  </li>
                  <li className={styles["pay"]}>去结算</li>
                </ul>
              </div>

            </div>
          </section>
        )}

        <CartRecommend />
      </div>

    </div>
  )
}
